<template>
  <div >
    <!-- 基本信息 -->
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">合同信息</span>
    </div>
    <el-table :data="fromdata.contractInfo" border style="width: 100%">
      <el-table-column prop="contract_NO" label="合同编号" width="120"/>
      <el-table-column prop="contract_NAME" label="合同名称" width="180"/>
      <el-table-column prop="amount_INCLUDING_TAX" label="合同金额(元)" width="120"/>
      <el-table-column prop="signed_DATE" label="合同生效时间" width="120"/>
      <el-table-column prop="start_DATE" label="履行开始时间" width="120"/>
      <el-table-column prop="end_DATE" label="履行结束时间" width="120"/>
    </el-table>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">项目进度</span>
    </div>
    <el-table :data="fromdata.projectProcessList" border style="width: 100%">
      <el-table-column prop="milestoneNode" label="里程碑节点" width="120"/>
      <el-table-column prop="planEndDate" label="计划完成时间" width="180"/>
      <el-table-column prop="actualDeliverer" label="完成人姓名" width="90"/>
      <el-table-column prop="actualDeliveryTime" label="完成时间" width="120"/>
      <el-table-column prop="postponeStatus" label="逾期状态" width="120"/>
      <el-table-column prop="postponeCause" label="逾期原因" width="360"/>
      <el-table-column prop="processProveFile" label="进度证明材料" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.processProveFile" v-for="(fileitem) in scope.row.processProveFile" :key="fileitem.id" style="margin-left:20px">
            <div readonly class="font14 fileLink" style="color:#0F85CF">
              <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{fileitem.fileName}}</a>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">应收信息
    </span>
    </div>
    <el-table :data="fromdata.contractPayeeList" border style="width: 100%">
      <el-table-column prop="contractSerialNumber" label="合同流水号" width="120"/>
      <el-table-column prop="contractType" label="合同类型" width="180"/>
      <el-table-column prop="contractAmount" label="合同金额(元)" width="120"/>
      <el-table-column prop="fee_it" label="IT费(元)" width="120"/>
      <el-table-column prop="fee_ct" label="CT费(元)" width="120"/>
      <el-table-column prop="payableProportion" label="应收比(%)" width="120"/>
      <el-table-column prop="adjustPayableProportion" label="应收比调整后(%)" width="130"/>
      <el-table-column prop="nowPayAmount" label="应收(元)" width="120"/>
      <el-table-column prop="fee_ct_proportion" label="IT费比(%)" width="120"/>
      <el-table-column prop="now_pay_it" label="IT应收(元)" width="120"/>
      <el-table-column prop="nowPayItCity" label="IT应收(元,市核定)" width="90"/>
      <el-table-column prop="nowPayItProvince" label="IT应收(元,省核定)" width="90"/>
    </el-table>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">已出账账单
    </span>
    </div>
    <el-table :data="bossBillInfoList" border style="width: 100%">
      <el-table-column prop="key_num" label="计费号码" width="120"/>
      <el-table-column prop="acct_id" label="账户ID" width="180"/>
      <el-table-column prop="product_instance_id" label="用户ID" width="120"/>
      <el-table-column prop="billing_cycle_id" label="账期" width="120"/>
      <el-table-column prop="acct_item_type_id" label="账单科目" width="120"/>
      <el-table-column prop="acct_item_type_name" label="账单名称" width="120"/>
      <el-table-column prop="rece_amount" label="应收费用(元)" width="120"/>
      <el-table-column prop="real_amount" label="实收费用(元)" width="120"/>
      <el-table-column prop="billArrears" label="账单欠费(元)" width="120"/>
    </el-table>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">缴费信息
    </span>
    </div>
    <el-table :data="bossPayInfoList" border style="width: 100%">
      <el-table-column prop="serv_number" label="计费号码" width="120"/>
      <el-table-column prop="fb_area_code" label="地市编码" width="120"/>
      <el-table-column prop="payrec_fee" label="缴费金额(元)" width="120"/>
      <el-table-column prop="foreign_date" label="缴费时间" width="120"/>
    </el-table>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">资产信息</span>
    </div>
    <van-field readonly required name="contractPropertyFee" :value="fromdata.contractPropertyFee" label="合同资产(元)：" label-width="7.5em" />
    <van-field readonly required name="contractDebtFee" :value="fromdata.contractDebtFee" label="合同负债(元)：" label-width="7.5em" />
    <van-field readonly required name="contractOweFee" :value="fromdata.contractOweFee" label="逾期欠费(元)：" label-width="7.5em" />
    <van-field readonly name="contractAssetTime" :value="fromdata.contractAssetTime" label="最终审批时间：" label-width="7em" />
    <van-field readonly name="contractPropertyFeeRate" :value="fromdata.contractPropertyFeeRate" label="合同资产在项目总金额的占比(%)：" label-width="16em" />
    <div style="padding-bottom: 42px"></div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import SectionHeader from "@/views/sztdzj/sztdzjDetail/section-header.vue";
import dict_type_value from '@/components/dict_type_value';
import myvan_field from "@/components/myvanfield/index.vue";
import {openFileUrl} from "@/store/openFile";

export default {
  components: {
    myvan_field, SectionHeader,
    dict_type_value},
  data() {
    return {
      brobossBillInfoList:[],
      bossBillInfoList:[],
      bossPayInfoList:[]
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  props: ['businessdata','fromdata','showHistory','historydata','approveList'],
  created() {
  },
  watch: {
    fromdata: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        var bossBill_number1=0
        var bossBill_number2=0
        var bossBill_number3=0
        this.brobossBillInfoList=this.fromdata.bossBillInfoList
        if (this.brobossBillInfoList!=null) {
          this.bossBillInfoList=[]
          for (var i=0;i<this.brobossBillInfoList.length;i++) {
            bossBill_number1=Number(bossBill_number1)+Number(this.brobossBillInfoList[i].rece_amount)
            bossBill_number2=Number(bossBill_number2)+Number(this.brobossBillInfoList[i].real_amount)
            this.brobossBillInfoList[i].billArrears=Number(Number(this.brobossBillInfoList[i].rece_amount)-Number(this.brobossBillInfoList[i].real_amount)).toFixed(2)
            bossBill_number3=Number(bossBill_number3)+Number(this.brobossBillInfoList[i].billArrears)
            this.bossBillInfoList.push(this.brobossBillInfoList[i]);
          }
          var bossBillListadd={'key_num':'合计','rece_amount':bossBill_number1.toFixed(2),'real_amount':bossBill_number2.toFixed(2),'billArrears':bossBill_number3.toFixed(2)}
          this.bossBillInfoList.push(bossBillListadd);
        }
        var bossPay_number=0
        if (this.fromdata.bossPayInfoList!=null) {
          this.bossPayInfoList=[]
          for (var i=0;i<this.fromdata.bossPayInfoList.length;i++) {
            bossPay_number=Number(bossPay_number)+Number(this.fromdata.bossPayInfoList[i].payrec_fee)
            this.bossPayInfoList.push(this.fromdata.bossPayInfoList[i]);
          }
          var splitListadd={'fb_area_code':'合计','payrec_fee':bossPay_number.toFixed(2)}
          this.bossPayInfoList.push(splitListadd);
        }
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    }
  },
  methods: {
    openFileUrlfun(value) {
      this.$router.push(
          {
            name: 'fileview',
            query: {
              openFileUrl: openFileUrl(value)
            }
          }
      );
    }
  },
}
</script>

<style>
.tables.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>